<div class="card card-href card-app" [routerLink]="['/app', app.name]">
    <div class="card-body" sqxTourStep="app">
        <div class="row g-0">
            <div class="col-auto card-left"><sqx-avatar [identifier]="app.name" [image]="app.image" /></div>

            <div class="col card-right">
                <h3 class="card-title">{{ app.displayName }}</h3>

                <div class="card-text card-links truncate">
                    <a [routerLink]="['/app', app.name]" sqxStopClick>{{ "common.edit" | sqxTranslate }}</a>
                    <span class="deeplinks">
                        &nbsp;|
                        <a [routerLink]="['/app', app.name, 'content']" sqxStopClick>{{ "common.content" | sqxTranslate }}</a> &middot;
                        <a [routerLink]="['/app', app.name, 'assets']" sqxStopClick>{{ "common.assets" | sqxTranslate }}</a> &middot;
                        <a [routerLink]="['/app', app.name, 'settings']" sqxStopClick>{{ "common.settings" | sqxTranslate }}</a>
                    </span>
                </div>

                @if (app.description) {
                    <div class="card-text">{{ app.description }}</div>
                }
            </div>
        </div>

        @if (app.canLeave) {
            <button
                class="btn btn-sm btn-text-secondary"
                #buttonOptions
                attr.aria-label="{{ 'common.options' | sqxTranslate }}"
                (click)="dropdown.toggle()"
                sqxStopClick
                type="button">
                <i class="icon-dots"></i>
            </button>
            <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
                <a
                    class="dropdown-item dropdown-item-delete"
                    confirmRememberKey="leaveApp"
                    confirmText="i18n:apps.leaveConfirmText"
                    confirmTitle="i18n:apps.leaveConfirmTitle"
                    (sqxConfirmClick)="leave.emit(app)">
                    {{ "apps.leave" | sqxTranslate }}
                </a>
            </sqx-dropdown-menu>
        }
    </div>
</div>
